<template>
<el-form :model="model" label-width="80px" class="mb-3" size="small">
  <el-row :gutter="20">
    <slot/>
    <!-- <el-col :span="8" :offset="0">
      <el-form-item label="关键词">
        <el-input v-model="searchForm.title" placeholder="商品名称" clearable></el-input>  
      </el-form-item>
    </el-col> -->

    <template v-if="showSearch">
      <slot name="show" />
    </template>
    <!-- <el-col :span="8" :offset="0" v-if="showSearch">
      <el-form-item label="商品分类" prop="category">
        <el-select v-model="searchForm.category_id" placeholder="请选择商品分类" clearable>
          <el-option v-for="item in category_list" :key="item.id" :label="item.name" :value="item.id"> 
          </el-option>
        </el-select>   
      </el-form-item>
    </el-col> -->

    <el-col :span="8" :offset="showSearch ? 0 :8"> 
      <div class="flex items-center justify-end">
        <el-button type="primary" @click="$emit('search')">搜索</el-button>
        <el-button @click="$emit('reset')">重置</el-button>

        <el-button type="primary" text @click="showSearch = !showSearch" v-if="hasShowSearch">
          {{ showSearch ? '收起' : "展开" }}
          <el-icon>
            <ArrowUp v-if="showSearch"/>
            <ArrowDown v-else/>
          </el-icon>
        </el-button>

      </div>
    </el-col>
  </el-row>
</el-form>
</template>

<script setup>
import { ref,useSlots } from 'vue'

defineProps({
  model:Object
})
defineEmits(["search","reset"]) //暴露2个方法到父组件

const showSearch = ref(false)

const slots = useSlots()
const hasShowSearch = ref(!!slots.show)
</script>

<style lang='scss'>
</style>